<script setup lang="ts">
import type { WordInfo } from '@/types/word'
import type { FormInstance, FormRules } from 'element-plus'
import { ElNotification, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import { getWordData, addWord, updateWord, delWord } from '@/api/word'

// 获取敏感词数据
const wordsData = ref<WordInfo[]>([])
const loading = ref(false)
// 分页
const total = ref(0)
const params = ref({
  page: 1, // 当前页
  pageSize: 10 // 当前生效的每页条数
})
const getWord = async () => {
  loading.value = true
  const result = await getWordData(params)
  wordsData.value = result.data
  // @ts-ignore
  total.value = result.total
  loading.value = false
  // 处理数据
  wordsData.value.forEach((item: WordInfo) => {
    item.isEdit = false
  })
}
const handleSizeChange = (size: number) => {
  params.value.page = 1
  params.value.pageSize = size
  getWord()
}
const handleCurrentChange = (value: number) => {
  params.value.page = value
  getWord()
}

// 添加敏感词
const formRef = ref<FormInstance>()
const isShowDialog = ref(false)
const ruleForm = ref<WordInfo>({
  word: ''
})
// 表单校验规则
const rules = ref<FormRules<WordInfo>>({
  word: [
    { required: true, message: '请输入敏感词', trigger: 'blur' },
    { max: 20, message: '敏感词不能超过20位', trigger: 'blur' }
  ]
})
// 确认按钮 自定义校验规则
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      await addWord(ruleForm.value)
      isShowDialog.value = false
      ElNotification({
        title: '温馨提示',
        message: '添加成功',
        type: 'success',
        duration: 1500
      })
      ruleForm.value.word = ''
      getWord()
    }
  })
}

// 修改敏感词
const editWord = (row: WordInfo) => {
  row.isEdit = true
  row.inputValue = row.word
}
const submitWord = async (row: WordInfo) => {
  await updateWord(row)
  row.isEdit = false
  ElNotification({
    title: '温馨提示',
    message: '修改成功',
    type: 'success',
    duration: 1500
  })
  row.word = row.inputValue as string
}

// 删除敏感词
const delBtn = async (id: number) => {
  await ElMessageBox.confirm('你确定要删除该敏感词吗？', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delWord(id)
  ElNotification({
    title: '温馨提示',
    message: '删除成功',
    type: 'success',
    duration: 1500
  })
  getWord()
}

// 关闭Dialog弹层
const closeDialog = () => {
  isShowDialog.value = false
  ruleForm.value.word = ''
}

onMounted(() => {
  getWord()
})
</script>

<template>
  <page-container title="敏感词管理">
    <!-- 按钮 -->
    <template #extra>
      <el-button type="primary" @click="isShowDialog = true"
        >&nbsp;添加&nbsp;</el-button
      >
    </template>

    <!-- 表格 -->
    <el-table
      :data="wordsData"
      v-loading="loading"
      style="width: 100%"
      :row-style="{ height: '66px' }"
    >
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="word" label="名称" align="center">
        <template v-slot="{ row }">
          <el-input
            v-model="row.inputValue"
            style="width: 50%"
            v-if="row.isEdit"
          />
          <span v-else>{{ row.word }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <span v-if="row.isEdit">
            <el-button @click="row.isEdit = false">取消</el-button>
            <el-button type="primary" @click="submitWord(row)">确定</el-button>
          </span>
          <span v-else>
            <el-button type="primary" link @click="editWord(row)"
              >编辑</el-button
            >
            <el-button type="primary" link @click="delBtn(row.id)"
              >删除</el-button
            >
          </span>
        </template>
      </el-table-column>
      <!-- 暂无数据 -->
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-row
      style="display: flex; justify-content: end"
      v-if="wordsData.length > 0"
    >
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.pageSize"
        :page-sizes="[2, 3, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 20px"
      />
    </el-row>

    <!-- Dialog弹层 -->
    <el-dialog
      v-model="isShowDialog"
      title="添加敏感词"
      width="500"
      @close="closeDialog"
    >
      <el-form
        :model="ruleForm"
        autocomplete="off"
        ref="formRef"
        :rules="rules"
      >
        <el-form-item prop="word" class="form-item">
          <el-input placeholder="请输入敏感词" v-model="ruleForm.word" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm(formRef)"
            >确认</el-button
          >
        </div>
      </template>
    </el-dialog>
  </page-container>
</template>

<style scoped lang="scss">
.form-item {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
